<template>
  <div class="shift-card">
    <div class="card-header">
      <span>工作调班申请</span>
    </div>

    <div class="card-content">
      <div class="input-group">
        <div class="input-item">
          <label>原定工作日：</label>
          <el-date-picker
            v-model="startDate"
            type="date"
            placeholder="选择原定日期"
            value-format="YYYY-MM-DD"
          />
        </div>
        <div class="separator">调整为</div>
        <div class="input-item">
          <label>新的工作日：</label>
          <el-date-picker
            v-model="endDate"
            type="date"
            placeholder="选择新日期"
            value-format="YYYY-MM-DD"
          />
        </div>
      </div>

      <p class="hint" v-if="startDate && endDate">
        准备将
        <span class="weekday-display" v-if="startWeekday">{{ startWeekday }} </span>
        调整到
        <span class="weekday-display" v-if="endWeekday">{{ endWeekday }} </span>
      </p>
      <el-button
        type="primary"
        @click="handleShift"
        :disabled="!startDate || !endDate"
        class="submit-btn"
      >
        确认调班
      </el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { move } from '@/api/schedule'
import router from '@/router'
import { useUserStore } from '@/stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, ref } from 'vue'
const userStore = useUserStore()
if (!userStore.isAdm) router.push('/401')

const startWeekday = computed(() => {
  return getWeekday(startDate.value)
})
const endWeekday = computed(() => {
  return getWeekday(endDate.value)
})
const startDate = ref('')
const endDate = ref('')
const loading = ref(false)
const handleShift = async () => {
  try {
    loading.value = true
    await ElMessageBox.confirm(
      `你确认需要把课程从${startDate.value}统一调整${endDate.value}到?这会清空${endDate.value}的课程安排，该操作不可逆`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )
    await move(startDate.value, endDate.value)
    ElMessage.success('操作成功')
  } finally {
    loading.value = false
  }
}
const getWeekday = (dateString: string) => {
  const date = new Date(dateString)
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  return weekdays[date.getDay()]
}
</script>

<style scoped>
.shift-card {
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  overflow: hidden;
  max-width: 500px;
  margin: 20px;
}

.card-header {
  background: #6f7280;
  color: white;
  padding: 15px 20px;
  font-weight: 600;
  font-size: 16px;
}
.weekday-display {
  background: rgba(52, 152, 219, 0.1);
  padding: 6px 12px;
  border-radius: 20px;
  color: #2980b9;
  font-size: 14px;
  font-weight: 500;
}
.card-content {
  padding: 25px;
}

.input-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.input-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.input-item label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.separator {
  color: #999;
  font-size: 14px;
  margin: 0 15px;
}

.submit-btn {
  width: 100%;
  padding: 12px;
}

.hint {
  text-align: center;
  color: #27ae60;
  font-size: 14px;
  margin-top: 15px;
}
</style>
